import Vue from 'vue'

import Cookies from 'js-cookie'

import 'normalize.css/normalize.css' // a modern alternative to CSS resets

import Element from 'element-ui'
import './styles/element-variables.scss'
import zhLang from 'element-ui/lib/locale/lang/zh-CN'// 如果使用中文语言包请默认支持，无需额外引入，请删除该依赖

import '@/styles/index.scss' // global css

import App from './App'
import store from './store'
import router from './router'

import './icons' // icon
import './permission' // permission control
import './utils/error-log' // error log

import * as filters from './filters' // global filters

import Viewer from 'v-viewer'
import echarts from 'echarts' // 引入echarts  eslint-disable-line no-unused-vars
import 'viewerjs/dist/viewer.css'



//获取登录信息以及水印 (具体的接口和函数名需要根据实际项目进行调整)
const getUser = async () => {
	const res = await getUserProfile();
	userForm.value = { ...res.data.user }
	console.log(userForm.value)
	// 在获取用户信息成功后调用 addWatermark
	addWatermark();
};

let username = localStorage.getItem('username');
// 定义全局变量水印颜色
let watermarkColor = 'rgba(0, 0, 0, 0.4)';
 
// 辅助函数用于创建水印
const addWatermark = () => {
// 水印信息  //如果水印需要获取登录信息 那就进行修改
const loginInfo = username;
 
// 创建水印元素
const watermark = document.createElement('div');
 
// 设置水印元素的类名
watermark.className = 'watermark';
 
// 设置水印元素的 whiteSpace 属性，保证水印文本不换行
watermark.style.whiteSpace = 'nowrap';
 
// 设置水印元素的 position 属性为 fixed，使其相对于视口固定位置
watermark.style.position = 'fixed';
 
// 设置水印元素距离视口顶部的距离
watermark.style.top = '70px';
 
// 设置水印元素距离视口底部的距离
watermark.style.bottom = '100px';
 
// 设置水印元素的 pointerEvents 属性为 'none'，使其不参与交互
watermark.style.pointerEvents = 'none';
 
// 设置水印元素的层级 zIndex
watermark.style.zIndex = '9999';
 
// 设置水印行数
const rows = 10;
 
// 设置每行显示的 div 数
const divsPerRow = 30;
 
// 设置水印行间距
const rowMarginBottom = 150;
 
// 设置水印左右间距
const rowMarginHorizontal = 0;
 
// 创建水印行和 div
for (let i = 0; i < rows; i++) {
    // 创建水印行元素
    const rowElement = document.createElement('div');
  
    // 设置水印行元素的 display 属性为 flex，使其子元素水平排列
    rowElement.style.display = 'flex';
  
    // 设置水印行元素距离下一行的底部距离
    rowElement.style.marginBottom = `${rowMarginBottom}px`;
  
    // 设置水印行元素左边距离视口左侧的距离
    rowElement.style.marginLeft = `${rowMarginHorizontal}px`;
  
    // 设置水印行元素右边距离视口右侧的距离
    rowElement.style.marginRight = `${rowMarginHorizontal}px`;
  
    // 在每行上创建 div 元素
    for (let j = 0; j < divsPerRow; j++) {
        // 创建水印的 div 元素
        const divElement = document.createElement('div');
    
        // 设置水印的 div 元素的旋转角度
        divElement.style.transform = 'rotate(-30deg)';
    
        // 设置水印的 div 元素的字体大小
        divElement.style.fontSize = '18px';

        divElement.style.marginLeft  = '200px';
    
        // 设置水印的 div 元素的颜色为颜色变量的值
        divElement.style.color = watermarkColor;
    
        // 设置水印的 div 元素的透明度
        divElement.style.opacity = '0.3';
    
        // 设置水印的 div 元素的文本内容
        divElement.textContent = loginInfo;
    
        // 将水印的 div 元素添加到水印行元素
        rowElement.appendChild(divElement);
    }
  
    // 将水印行元素添加到水印元素
    watermark.appendChild(rowElement);
  }
  
  // 将水印元素添加到 body 中
  document.body.appendChild(watermark);
  };
  
  // 在必要时更新水印颜色
  router.beforeEach((to, from, next) => {
    //登录页不显示水印 这个是登录页的路径，根据实际项目调整
    if (to.path !== '/login') {
        // 根据需要更改颜色
        watermarkColor = 'rgba(0, 0, 0, 0.4)';
        // 获取已存在的水印元素
        const existingWatermark = document.querySelector('.watermark');
        // 如果存在水印元素，则从 DOM 中移除
        if (existingWatermark) {
            document.body.removeChild(existingWatermark);
        }
        addWatermark();
    }
    next();

  });

/**
 * If you don't want to use mock-server
 * you want to use MockJs for mock api
 * you can execute: mockXHR()
 *
 * Currently MockJs will be used in the production environment,
 * please remove it before going online ! ! !
 */
if (process.env.NODE_ENV === 'production') {
  const { mockXHR } = require('../mock')
  mockXHR()
}

Vue.use(Element, {
  size: Cookies.get('size') || 'medium', // set element-ui default size
  locale: zhLang // 如果使用中文，无需设置，请删除
})

// register global utility filters
Object.keys(filters).forEach(key => {
  Vue.filter(key, filters[key])
})

Vue.config.productionTip = false

new Vue({
  el: '#app',
  router,
  store,
  render: h => h(App)
})

Vue.use(Viewer, {
  defaultOptions: {
    zIndex: 9999
  }
})
